<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta charset="utf-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/flexible.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue.js"></script>
    <title>测试结果</title>
    <style>
        /*样式初始化*/
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        button,
        textarea,
        p,
        blockquote,
        th,
        td {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url('images/bg4.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            color: #333;
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
            font-size: 100%;
        }

        address,
        caption,
        cite,
        code,
        dfn,
        em,
        strong,
        th,
        var {
            font-style: normal;
            font-weight: normal;
        }

        a {
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
        }

        img {
            border: none;
        }

        ol,
        ul,
        li {
            list-style: none;
        }

        input,
        textarea,
        select,
        button {
            font: 0.3783783783783784rem Verdana, Helvetica, Arial, sans-serif;
            outline: none
        }

        table {
            border-collapse: collapse;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        html,
        body,
        #app {
            height: 100%;
            overflow: hidden;
        }

        #app {
            position: relative;
        }

        .result {
            height: 8.81081081081081rem;
            width: 8.108108108108109rem;
            overflow: hidden;
            margin: 2.1621621621621623rem auto 0;
            color: #666;
            border-radius: 0.2702702702702703rem;
            background: #fff;
            transition: all .5s linear;
            box-shadow: 0 0 0.08108108108108109rem 0.02702702702702703rem #eee;
        }

        .result p {
            font-size: 0.4864864864864865rem;
            font-weight: bold;
            color: #fff;
            text-align: center;
            border-radius: 0.2702702702702703rem 0.2702702702702703rem 0 0;
            background: #409EFF;
            padding: 0.5405405405405406rem 0.5405405405405406rem;
        }
        .result .content{
            padding: 0.5405405405405406rem;
            line-height: .8rem;
            height: 5.675675675675675rem;
            overflow: auto;
            font-size: 0.4864864864864865rem;
        }

        .code {
            position: absolute;
            bottom: 1rem;
            left: 1.0810810810810811rem;
            height: 2.7027027027027026rem;
            width: 1.6216216216216217rem;
        }
        .code img {
            height: 1.6216216216216217rem;
            width: 1.6216216216216217rem;
            border: 0.10810810810810811rem solid #409EFF;
            border-radius: 0.2702702702702703rem;
        }

        .code p,
        .share p {
            font-size: 0.2702702702702703rem;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="animated fadeInDown result">
            <p>结 论</p>
            <div class="content">
                {{resultContext}}
            </div>
        </div>
        <!-- <div class="share">
            <div class="button">分享</div>
        </div> -->
        <div class="animated bounceInLeft code">
            <img src="images/code.jpg" alt="">
            <p>'扫一扫' 识别二维码</p>
        </div>

    </div>

</body>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                resultContext: ''
            }
        },
        methods: {

        },
        created() {
            let sum = location.search.split('=')[1];
            if (sum <= 20) {
                this.resultContext = '您麻烦大了。从您的选择结果来看，近段时间您的状态不是很好，需要尽快调整。请找您最好的朋友聚聚吧，或者打个电话回家，跟家人倾诉下。如果都没有，那就需要我们为你找一位心理医生了。';
            } else if (21 <= sum && sum <= 39) {
                this.resultContext = "心理健康状况堪忧"
            } else if (40 <= sum && sum <= 60) {
                this.resultContext = "心理非常健康";
            }
        },
        mounted() {

        },

    })
</script>

</html>